<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>art</title>
</head>
<body>
<script src="./../node_modules/art-template/lib/template-web.js"></script>
<script type="text/html" id="tpl">
    <h1>{{title}}</h1>
    <h3>{{@ sub}}</h3>
    <h3>{{"我的年龄"+ age + "岁"}}</h3>
    <!--    @ 代表数据渲染时再执行一边dom识别-->
    {{if age > 100}}
    <h4>我的年龄大于100岁</h4>
    {{else if age < 50}}
    <h4>我的年龄小于50岁</h4>
    {{else}}
    <h4>我的年龄在50岁和100岁之间</h4>
    {{/if}}
    <h1>{{$imports.dateFormat(data)}}</h1>
</script>
<script>
    
    let data = {
        title: '热烈祝贺！！',
        sub: '<b>为零知道</b>',
        age: 30,
        data: new Date()
    }

    function dateFormat(time) {
        let _ = {}
        let d = new Date(time)
        _.yyyy = d.getFullYear();
        _.mm = d.getMonth() + 1;
        _.dd = d.getDay(); //这个是星期几的意思
        _.dd = d.getDate(); // 这个是日期·
        return `${_.yyyy}-${_.mm}-${_.dd}`
    }

    template.defaults.dataFormat = dateFormat;
    //若 应用函数不在全局作用域下 则需上方语句给template 添加处理函数

    window.onload = function () {
        let html;
        html = template('tpl', data);
        document.body.innerHTML = html
    }

</script>
</body>
</html>
